layui.use(['form', 'jquery', 'layer'], function() {
	var form = layui.form;
	var $ = layui.jquery;
	var layer = layui.layer;
	//获取token
	var token = localStorage.getItem('token');
	var tbody = document.querySelector('tbody');
	var add = document.querySelector('#add');
	//定义一个数组用于更新数据
	var taskAry = [];
	ajax({
		type: 'get',
		url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
		token: token,
		success: function(res) {
			if (res.status == 0) {
				taskAry = res.data;
				updata();
				// compileFun();
			} else {
				alert(res.message)
			}
		}
	});
	function compileFun() {
		var compile = document.querySelectorAll('#compile');
		var deletes = document.querySelectorAll('#delete');
		var boxEditCate = document.querySelector('#boxEditCate');
		//给每一个编辑绑定点击事件
		for (var i = 0; i < compile.length; i++) {
			compile[i].addEventListener('click', function(e) {
				var id = this.getAttribute('data-id');
				var name = this.parentElement.parentNode.children[0].innerText;
				var alias = this.parentElement.parentNode.children[1].innerText
				//获取name节点的值;
				layer.open({
					btn: [],
					title: '修改文章分类',
					content: ` <form class="layui-form" lay-filter="editDialog" id="boxEditCate" >
		        <div class="layui-form-item">
		          <label class="layui-form-label">分类名称</label>
		          <div class="layui-input-block">
		            <input type="text" name="name" required="" value="${name}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
		          </div>
		        </div>
		        <div class="layui-form-item">
		          <label class="layui-form-label">分类别名</label>
		          <div class="layui-input-block">
		            <input type="text" name="alias" required="" lay-verify="required" value="${alias}" placeholder="请输入标题" autocomplete="off" class="layui-input">
		          </div>
		        </div>
		        <div class="layui-form-item">
		          <div class="layui-input-block">
		            <input type="hidden" name="Id" value="${id}">
		            <button class="layui-btn" lay-submit=""  lay-filter="IsModification"  id="but">确认修改</button>
		          </div>
		        </div>
		      </form>`,
					area: ['500px', '300px'],
				});
				form.on('submit(IsModification)', function(datas) {
					ajax({
						type: 'post',
						url: 'http://api-breakingnews-web.itheima.net/my/article/updatecate',
						token: token,
						data: datas.field,
						success: function(res) {
							if (res.status == 0) {
								var task = taskAry.findIndex(item => item.Id == id);
								// 修改任务名称
								taskAry[task].name = datas.field.name;
								taskAry[task].alias = datas.field.alias;
								//重新添加到页面
								updata();
								layer.msg(res.message);
							} else {
								layer.msg(res.message)
							}
						}
					});
					return false;
				});
			})
		}
		//循环绑定点击事件
		for (var j = 0; j < deletes.length; j++) {
			deletes[j].addEventListener('click', function(e) {
				var id2 = this.getAttribute('data-id') - 0;
				ajax({
					type: 'get',
					url: 'http://api-breakingnews-web.itheima.net/my/article/deletecate/' + id2,
					token: token,
					success: function(res) {
						if (res.status == 0) {
							// 从任务数组中找到已经删除掉的任务的索引
							var index = taskAry.findIndex(item => item.Id == id2);
							
							// 将任务从数组中删除
							taskAry.splice(index, 1);
							// 重新将任务数组中的元素显示在页面中
							updata();
							layer.msg(res.message);
						} else {
							layer.msg(res.message);
						}
					}
				})

			})
		}
		// //添加
		add.addEventListener('click', function() {
			layer.open({
				btn: [],
				title: '添加分类',
				content: ` <form class="layui-form" lay-filter="editDialog" id="boxEditCate" >
				  <div class="layui-form-item">
				    <label class="layui-form-label">分类名称</label>
				    <div class="layui-input-block">
				      <input type="text" name="name" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">分类别名</label>
				    <div class="layui-input-block">
				      <input type="text" name="alias" required="" lay-verify="required"  placeholder="请输入标题" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn" lay-submit=""  lay-filter="add"  id="but">确认添加</button>
					  <button type="reset" class="layui-btn  layui-btn-primary">重置</button>
				    </div>
				  </div>
				</form>`,
				area: ['500px', '300px'],
			});
			form.on('submit(add)', function(datas) {
				ajax({
					type: 'post',
					url: 'http://api-breakingnews-web.itheima.net/my/article/addcates',
					token: token,
					data: datas.field,
					success: function(res) {
						if (res.status == 0) {
							//把数据添加到数组当中
							//重新加载页面
							taskAry.push(datas.field);
							ajax({
								type: 'get',
								url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
								token: token,
								success: function(res) {
									if (res.status == 0) {
										taskAry = res.data;
										updata(1);
										// compileFun();
									} else {
										alert(res.message)
									}
								}
							});
							layer.msg(res.message);
						} else {
							layer.msg(res.message)
						}
					}
				});
				return false;
			});
		})

	}
	//用于更新页面
	function updata() {
		//拼接到页面当中
		var con = template('tpl', {
			info: taskAry
		});
		//将内容放入列表
		tbody.innerHTML = con;
		//数据初始化
		compileFun();
	}
})
